<template>
  <div class="content">
    <div class="heritage-map-container">
      <div class="map-content">
        <div ref="map" class="china-map"></div>

        <div class="info-panel" :class="{ 'has-selection': selectedProvince !== '请选择一个省份' }">
          <div class="panel-header">
            <h2>{{ selectedProvince }}</h2>
            <div class="divider"></div>
          </div>
          <div class="panel-body">
            <p>{{ provinceInfo }}</p>

            <div class="heritage-list" v-if="selectedHeritages.length > 0">
              <h3>代表性非遗项目</h3>
              <ul>
                <li v-for="(item, index) in selectedHeritages" :key="index">
                  {{ item.name }} <span class="level">{{ item.level }}</span>
                </li>
              </ul>
            </div>

            <div class="stats" v-if="selectedProvince !== '请选择一个省份'">
              <div class="stat-item">
                <div class="stat-value">{{ heritageStats.count || 0 }}</div>
                <div class="stat-label">非遗项目总数</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">{{ heritageStats.national || 0 }}</div>
                <div class="stat-label">国家级非遗</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">{{ heritageStats.provincial || 0 }}</div>
                <div class="stat-label">省级非遗</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import * as echarts from 'echarts';
import chinaMap from '../assets/chinamap.json';
import { getHeritageMapData, getProvinceDetail } from '@/api/RegionHeritage';

export default {
  name: 'HeritageMap',
  data() {
    return {
      selectedProvince: '请选择一个省份',
      provinceInfo: '点击地图上的省份，查看该地区的非遗信息。',
      selectedHeritages: [],
      heritageStats: {
        count: 0,
        national: 0,
        provincial: 0
      }
    };
  },
  async mounted() {
    await this.initMap();
  },
  methods: {
    async initMap() {
      const mapDom = this.$refs.map;
      const myChart = echarts.init(mapDom);
      echarts.registerMap('china', chinaMap);

      // 从API获取数据
      const { data: mapData } = await getHeritageMapData();

      const option = {
        tooltip: {
          trigger: 'item',
          formatter: params => {
            return `<strong>${params.name}</strong><br/>非遗项目: ${params.value || 0}项`;
          }
        },
        visualMap: {
          min: 0,
          max: 180,
          left: 'right',
          top: 'bottom',
          text: ['多', '少'],
          realtime: false,
          calculable: true,
          inRange: {
            // 使用ihchina.cn的配色方案
            color: ['#e3aab7', '#ec5757', '#ec0707', '#910202', '#310101FF']
          },
          textStyle: {
            color: '#310101FF'
          }
        },
        series: [
          {
            name: '非遗项目数量',
            type: 'map',
            map: 'china',
            roam: true,
            scaleLimit: {
              min: 1,
              max: 3
            },
            label: {
              show: true,
              fontSize: 12,
              color: '#590310'
            },
            itemStyle: {
              areaColor: '#f5f5f5',
              borderColor: '#ddd',
              borderWidth: 0.5
            },
            emphasis: {
              label: {
                show: true,
                color: '#fff',
                fontSize: 14
              },
              itemStyle: {
                // 选中颜色与ihchina.cn一致
                areaColor: '#590310',
                borderWidth: 1,
                shadowColor: 'rgba(0, 0, 0, 0.3)',
                shadowBlur: 8
              }
            },
            data: mapData,
            selectedMode: 'single'
          }
        ]
      };

      myChart.setOption(option);

      // 地图点击事件
      myChart.on('click', async (params) => {
        this.selectedProvince = params.name;

        try {
          const { data } = await getProvinceDetail(params.name);
          this.provinceInfo = data.info;
          this.selectedHeritages = data.heritages;
          this.heritageStats = {
            count: data.stats.value,
            national: data.stats.national,
            provincial: data.stats.provincial
          };
        } catch (error) {
          this.provinceInfo = '暂无该地区的详细非遗信息。';
          this.selectedHeritages = [];
          this.heritageStats = {
            count: params.value || 0,
            national: 0,
            provincial: 0
          };
        }
      });
    }
  }
};
</script>

<style scoped>
.content{
  height: 70%;
  width: 100%;
  display: flex;
  /*padding-top: 60px;*/
  background-image: url('@/assets/region.jpg');
  background-size: cover;         /* 图片覆盖全屏 */
  background-position: center;    /* 居中显示 */
  background-repeat: no-repeat;   /* 不重复 */
}
.heritage-map-container {

  width: 100vw;
  min-height: 100vh;
  box-sizing: border-box;
  position: relative;
  z-index: 0;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;
}

/*!* 可选：加个半透明遮罩层，让文字更清晰 *!*/
/*.heritage-map-container::before {*/
/*  content: '';*/
/*  position: fixed;*/
/*  top: 0;*/
/*  left: 0;*/
/*  right: 0;*/
/*  bottom: 0;*/
/*  background-color: rgba(255, 255, 255, 0.8); !* 白色半透明遮罩 *!*/
/*  z-index: -1;*/
/*}*/

.map-content {
  right: 20px;
  margin-top: 80px;
  display: flex;
  width: 90%;
  align-items: center;
  height: 600px;
  background: rgba(208, 194, 194, 0.8);
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  position: relative;
  z-index: 1;
}


.china-map {
  flex: 1;
  height: 100%;
  min-width: 0;
}

.info-panel {
  width: 350px;
  height: 100%;
  background: #fff;
  border-left: 1px solid #e8e8e8;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.info-panel.has-selection {
  background: #f8fcf3;
}

.panel-header {
  padding: 18px 20px;
  background: #590310;
  color: #fff;
}

.panel-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.divider {
  height: 2px;
  background: rgba(255, 255, 255, 0.25);
  margin-top: 10px;
  width: 40px;
}

.panel-body {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.panel-body p {
  font-size: 14px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 20px;
}

.heritage-list {
  margin: 25px 0;
}

.heritage-list h3 {
  font-size: 16px;
  color: #590310;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e8e8e8;
}

.heritage-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.heritage-list li {
  padding: 8px 0;
  border-bottom: 1px dashed #e8e8e8;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #333;
}

.heritage-list li:last-child {
  border-bottom: none;
}

.heritage-list .level {
  color: #590310;
  font-weight: 500;
}

.stats {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  text-align: center;
}

.stat-item {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #590310;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 12px;
  color: #888;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .map-content {
    flex-direction: column;
    height: auto;
  }

  .china-map {
    height: 500px;
  }

  .info-panel {
    width: 100%;
    height: auto;
    border-left: none;
    border-top: 1px solid #e8e8e8;
  }
}

@media (max-width: 576px) {
  .stats {
    flex-direction: column;
  }

  .stat-item {
    margin-bottom: 15px;
  }
}
</style>